<template>
  <div class="relative">
    <Button type="primary" v-per="'add'" class="relative float-right md:my-5 mx-5" @click="handleCreate"
      >新增文件系统规格</Button
    >
    <BasicTable @register="registerTable"></BasicTable>
    <FileSystemModal ref="modelRef" @success="handleSuccess"></FileSystemModal>
  </div>
</template>

<script lang="ts" setup>
import BasicTable from '/@/components/BasicTable/BasicTable.vue';
import { useBasicTable } from '/@/components/BasicTable/hooks/useBasicTable';
import { Button } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { ref } from 'vue';
import FileSystemModal from '/@/views/system-mgmt/fileSystemSize-mgmt/fileSystemModal.vue';
import { deleteSfs, getSfsList } from '/@/api/system-mgmt/sfs-mgmt/sfs';
import { columns } from '/@/views/system-mgmt/fileSystemSize-mgmt/data';
import { checkPowerByName } from '/@/utils/permission';

const modelRef = ref();
const { createMessage } = useMessage();

function handleCreate() {
  modelRef.value.showModal();
}

function handleEdit(record: Recordable) {
  modelRef.value.showModal(record, true);
}

const [registerTable, { reload }] = useBasicTable({
  api: getSfsList,
  columns: columns,
  immediate: true,
  useSearchForm: false,
  usePagination: true,
  actionColumns: [
    {
      name: '编辑',
      click: handleEdit,
      props: {
        style: { color: '#447b9c', fontWeight: 'bolder', backgroundColor: '' },
      },
      ifShow: checkPowerByName('update'),
    },
    {
      name: '删除',
      // eslint-disable-next-line no-use-before-define
      click: handleDelete,
      props: {
        style: { color: '#6285a3', fontWeight: 'bolder' },
      },
      ifShow: checkPowerByName('update'),
    },
  ],
});

async function handleDelete(record: Recordable) {
  await deleteSfs({ id: record.id });
  createMessage.success('文件系统删除成功！');
  reload();
}

async function handleSuccess() {
  reload();
}

defineExpose({ handleCreate });
</script>
